<template>
  <div class="app-container">
    <el-divider>
      <div class="my-divider">工单信息</div>
    </el-divider>
    <el-form :model="form" label-width="100px" label-position="left" size="small">
      <el-form-item label="工单名称" prop="reportOCodeName">
        <el-input :value="form.reportOCodeName"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="工单编号" prop="reportOCode">
        <el-input v-model="form.reportOCode"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="reportPCode">
        <el-input :value="form.gbsGood ? form.gbsGood.pdName : ''"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="产品编号" prop="reportPCode">
        <el-input :value="form.gbsGood ? form.gbsGood.pdCode : ''"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="规格型号" prop="reportPCode">
        <el-input :value="form.gbsGood ? form.gbsGood.pdSpecType : ''"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="产品类型" prop="reportPCode">
        <el-input
          :value="form.gbsGood && form.gbsGood.gbsGoodClass ? form.gbsGood.gbsGoodClass.gcName : ''"
          class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="单位" prop="reportPCode">
        <el-input
          :value="form.gbsGood && form.gbsGood.gbsGoodUnit ? form.gbsGood.gbsGoodUnit.guName : ''"
          class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="工单批次" prop="reportOBatch">
        <el-input v-model="form.reportOBatch"
                  class="my-input" disabled
        />
      </el-form-item>
    </el-form>

    <el-divider>
      <div class="my-divider">任务信息</div>
    </el-divider>
    <el-form :model="form" label-width="100px" label-position="left" size="small">
      <el-form-item label="任务名称" prop="reportTCodeName">
        <el-input :value="form.reportTCodeName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="任务编号" prop="reportTCode">
        <el-input v-model="form.reportTCode"
                  class="my-input" disabled
        />
      </el-form-item>
      <el-form-item label="生产单元" prop="reportWCellName">
        <el-input v-model="form.reportWCellName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="工艺路线" prop="reportRouteName">
        <el-input v-model="form.reportRouteName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="工序编号" prop="reportProcedure">
        <el-input v-model="form.reportProcedure" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="工序名称" prop="reportProcedureName">
        <el-input v-model="form.reportProcedureName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="生产班组" prop="reportGroupName">
        <el-input v-model="form.reportGroupName" disabled
                  class="my-input"
        />
      </el-form-item>
      <el-form-item label="任务负责人" prop="wtaskManager">
        <el-input :value="form.reportWMangerName" disabled
                  class="my-input"
        />
      </el-form-item>
    </el-form>

    <el-divider>
      <div class="my-divider">检验项目</div>
    </el-divider>

    <el-table :data="qcQualityProjects" v-loading="qcQualityLoading">
      <el-table-column label="序号" type="index" align="center" />
      <el-table-column label="质检项目编码" align="center" prop="qualityCode" />
      <el-table-column label="项目名称" align="center" prop="qualityProjectName" />
      <el-table-column label="检验标准" align="center" prop="qualityProjectStandard" />
      <el-table-column label="项目最大值" align="center" prop="qualityProjectMax" />
      <el-table-column label="项目最小值" align="center" prop="qualityProjectMin" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="openDrawbackDialog(scope.row)"
            v-hasPermi="['qc:project:query']"
          >查看缺陷
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-divider>
      <div class="my-divider">报工信息</div>
    </el-divider>
    <el-descriptions :colon="false" :column="2">
      <el-descriptions-item label="报工人员">
        {{ form.reportPeoName }}
      </el-descriptions-item>
      <el-descriptions-item label="报工数量">
        {{ form.reportCompleteNum }}
      </el-descriptions-item>
      <el-descriptions-item label="报工时间" :span="2">
        {{ form.reportTime }}
      </el-descriptions-item>
    </el-descriptions>

    <el-divider>
      <div class="my-divider">计价薪资信息</div>
    </el-divider>
    <el-form :model="form" ref="form" :rules="rules" label-width="100px" label-position="left" size="small">
      <el-form-item label="计价方式" prop="reportCalcSalType">
        <dict-tag :options="getCalcSalType" :value="form.reportCalcSalType" />
      </el-form-item>
      <el-form-item label="计件单价" prop="reportCalcSalSingle">
        <el-input-number :precision="2" v-model="form.reportCalcSalSingle" class="my-input" disabled />
      </el-form-item>
      <el-form-item label="报工时长" prop="reportCalcSalTime" v-if="form.reportCalcSalType === '1'">
        <el-input-number :precision="1" v-model="form.reportCalcSalTime" class="my-input" disabled />
      </el-form-item>
      <el-form-item label="工资合计" prop="reportCalcSalTotal">
        <el-input v-model="form.reportCalcSalTotal" class="my-input" disabled />
      </el-form-item>
    </el-form>

    <!--    查看缺陷-->
    <el-dialog title="选择缺陷" :visible.sync="projectDrawbackDialogVisible" width="50%" append-to-body>
      <el-table ref="projectDrawbackTable" :data="projectDrawbackList">
        <el-table-column label="缺陷编号" align="center" prop="drawbackCode" />
        <el-table-column label="缺陷名称" align="center" prop="drawbackName" />
        <el-table-column label="缺陷类型编码" align="center" prop="qcDrawbackType.drawbackTypeName" />
        <el-table-column label="缺陷状态" align="center" prop="drawbackStatus">
          <template slot-scope="scope">
            <dict-tag :options="getStatus" :value="scope.row.drawbackStatus" />
          </template>
        </el-table-column>
        <el-table-column label="缺陷描述" align="center" prop="drawbackDetail" />
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDrawback">关 闭</el-button>
      </div>
    </el-dialog>

    <MyConfirmBtnGroup :after-cancel-open-page="backPage" :ok-event="submitForm" />
  </div>
</template>

<script>
import { calcSal, getProWorkReport } from '@/api/yyj/pro/workReport'
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import { listQcProject } from '@/api/yyj/qc/qcProject'

export default {
  name: 'CalcSal',
  components: { MyConfirmBtnGroup },
  dicts: ['pbs_calc_sal', 'yyj_common_status'],
  data() {
    return {
      backPage: '/pro/workReport',
      form: {},
      qcQualityProjects: [],
      qcQualityLoading: true,
      projectDrawbackDialogVisible: false,
      projectDrawbackList: [],
      rules: {
        reportCalcSalTotal: [{
          required: true,
          validator(rule, val, callback) {
            if (!val) {
              callback('请选择计价方式')
            }
            callback()
          }
        }]
      }
    }
  },
  computed: {
    getCalcSalType() {
      return this.dict.type.pbs_calc_sal
    },
    getStatus() {
      return this.dict.type.yyj_common_status
    }
  },
  created() {
    const reportCode = this.$route.params.reportCode
    this.getDetail(reportCode)
  },
  methods: {
    // 改变单价
    handleChangeSingle(val) {
      this.form.reportCalcSalTotal = this.form.reportCompleteNum * val
    },
    // 改变时长
    handleChangeTime(val) {
      this.form.reportCalcSalTotal = this.form.reportCalcSalRate * val
    },
    // 改变报酬率
    handleChangeRate(val) {
      this.form.reportCalcSalTotal = this.form.reportCalcSalTime * val
    },
    // 改变计价方式
    handleChangeCalcSalType() {
      this.form.reportCalcSalTotal = 0
    },
    // 查询详情
    async getDetail(reportCode) {
      const res = await getProWorkReport(reportCode)
      console.log('res ', res)
      this.form = res.data
      this.form.reportCalcSalTotal = this.form.reportCalcSalSingle * this.form.reportCompleteNum
      await this.getProjects(res.data.reportQcCode)
    },
    // 获取质检项目
    async getProjects(qcCode) {
      this.qcQualityLoading = true
      const res = await listQcProject(qcCode)
      this.qcQualityProjects = res.data
      this.qcQualityLoading = false
    },
    openDrawbackDialog(row) {
      this.projectDrawbackList = row.drawbackList
      this.projectDrawbackDialogVisible = true
    },
    closeDrawback() {
      this.projectDrawbackList = []
      this.projectDrawbackDialogVisible = false
    },
    // 提交
    submitForm() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.$modal.loading('正在提交...')
          await calcSal(this.form)
          this.$modal.msgSuccess('结算成功')
          this.afterSubmit()
        }
      })
    },
    afterSubmit() {
      this.$tab.closeOpenPage()
      this.$tab.refreshPage({
        path: this.backPage
      })
      this.$modal.closeLoading()
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/yyj/change";
</style>
